<script setup lang="ts">
defineOptions({
  name: "upload"
});
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "px-ui";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";
import FileUpload from "@/components/Upload/FileUpload.vue";

const route = useRoute();

interface Props {
  disabled: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  disabled: false
});

interface RuleForm {
  imgList: Array<string>;
  fileList: Array<string>;
  executeRemark: string;
}

const uploadData = defineModel({ type: Object, default: () => ({ imgList: [], fileList: [], executeRemark: "" }) });
const imgList = ref<Array<any>>([]);
const fileList = ref<Array<any>>([]);
//  图片上传类型add：新增，edit：编辑，view：查看
const uploadType = ref<string>("add");
const uploadRuleFormRef = ref<FormInstance>();
const uploadRuleForm = reactive<RuleForm>({
  imgList: [],
  fileList: [],
  executeRemark: ""
});

const uploadRules = reactive<FormRules<RuleForm>>({
  imgList: [{ required: false, message: "请上传图片", trigger: ["blur", "change"] }],
  fileList: [{ required: false, message: "请上传文档", trigger: ["blur", "change"] }],
  executeRemark: [{ required: false, message: "请输入备注", trigger: ["blur", "change"] }]
});

const changePhotoListHandler = (imgList: Array<any>) => {
  uploadData.value.imgList = [];
  if (!imgList?.length) return;
  uploadData.value.imgList = imgList.map(item => item?.response?.data || item);
};

const changeFileListHandler = (fileList: Array<any>) => {
  uploadData.value.fileList = [];
  if (!fileList?.length) return;
  uploadData.value.fileList = fileList.map(item => item);
};

const inputChangeHandler = (v: string) => {
  uploadData.value.executeRemark = v;
};

const validate = () => {
  if (!uploadRuleFormRef.value) return;
  return new Promise((resolve, reject) => {
    uploadRuleFormRef.value.validate(valid => {
      if (valid) {
        resolve(uploadData.value);
      } else {
        reject(false);
      }
    });
  });
};

const init = () => {
  const {
    query: { type = "add" }
  } = route;
  if (type !== "add") {
    const { imgList: imgList_ = [], fileList: fileList_ = [], executeRemark = "" } = uploadData.value;
    imgList_?.length && (imgList.value = imgList_?.map(item => item));
    fileList_?.length && (fileList.value = fileList_?.map(item => item));
    uploadRuleForm.executeRemark = executeRemark;
    if (type === "edit") {
      uploadType.value = "edit";
    } else if (type === "check") {
      uploadType.value = "view";
    }
  }
};

defineExpose({
  validate,
  init
});
</script>

<template>
  <div class="upload">
    <px-form ref="uploadRuleFormRef" :model="uploadRuleForm" :rules="uploadRules" label-position="top">
      <div class="upload-title">上传结果</div>
      <px-form-item label="图片上传" prop="imgList">
        <PhotoUpload
          :photoType="uploadType"
          :photoList="imgList"
          :photoData="{ moduleName: 'replaceBottle' }"
          :countLimit="5"
          @changePhotoList="changePhotoListHandler"
        />
      </px-form-item>
      <px-form-item label="文档上传" prop="fileList">
        <FileUpload :fileType="uploadType" :fileList="fileList" :countLimit="3" @changeFileList="changeFileListHandler" />
      </px-form-item>
      <div class="upload-title">备注</div>
      <px-form-item label="" prop="executeRemark">
        <px-input
          v-model.trim="uploadRuleForm.executeRemark"
          :disabled="disabled"
          :rows="2"
          maxlength="1000"
          show-word-limit
          type="textarea"
          placeholder="请输入备注"
          @change="inputChangeHandler"
        />
      </px-form-item>
    </px-form>
  </div>
</template>

<style lang="scss" scoped>
.upload {
  margin-top: 12px;

  .upload-title {
    height: 40px;
    font-size: 15px;
    font-weight: 600;
    line-height: 40px;
    color: #555;
  }
}
</style>
